import { PureComponent } from "react"
import { flushSync } from "react-dom"
export default class SetStateAsync extends PureComponent {
  constructor() {
    super()
    this.state = {
      n: 1
    }
  }

  onAdd() {
    // 1. 测试出来了是异步的
    // this.setState({
    //     n: this.state.n + 1
    // })
    // //
    // console.log('-------',this.state.n)
    // 2. 需要将部分代码确保是同步执行时
    const { n } = this.state
    this.setState(
      (state) => {
        const m = n + 1
        console.log("state:", state, "m(最新值):" + m)
        return {
          n: m
        }
      },
      () => {
        console.log("我是 setState 第二个形参回调函数的执行，并且我是纯函数")
      }
    )
  }
  onSub() {
    /** 1. 这样都不能实现只减1 */
    // const state = this.state;
    // this.setState(()=>{
    //     const {n} = state;
    //     return {
    //         n: n - 1,
    //     }
    // },()=>{
    //     this.setState(()=>{
    //         const {n} = state;
    //         return {
    //             n: n - 1,
    //         }
    //     },()=>{
    //
    //     })
    // })
    /** 2. react提供的同步设置方法
     *    不疑惑为什么最终不是减2吗，其实不然，每个都是异步，到最后被内部会合并处理
     * */
    flushSync(() => {
      this.setState({
        n: this.state.n - 1
      })
      this.setState({
        n: this.state.n - 1
      })
    })
    /** 3.最后补充一点，react18之前如果用setTimeout进行包裹还能变成同步setState，现在不行了。只能通过flushSync实现同步效果 */
  }

  render() {
    return (
      <div>
        <button onClick={() => this.onAdd()}>+1</button>
        {this.state.n}
        <button onClick={() => this.onSub()}>-1</button>
      </div>
    )
  }
}
